import React from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import styled from 'styled-components';
import Tags from 'views/Tags';
import Money from 'views/Money';
import Statistic from 'views/Statistic';
import { Tag } from 'views/Tag';

const AppWrapper = styled.div`
  color: #333;
  max-width: 500px;
  margin: 0 auto;
`;

function NoMatch() {
  return <div>页面不存在，打错了吧</div>;
}

export default function App() {

  return (
    <AppWrapper>
      <HashRouter>
        <Switch>
          <Route exact path="/tags">
            <Tags />
          </Route>
          <Route exact path="/tags/:id">
            <Tag />
          </Route>
          <Route exact path="/money">
            <Money />
          </Route>
          <Route exact path="/statistic">
            <Statistic />
          </Route>
          <Redirect exact from="/" to="/money" />
          <Route path="*">
            <NoMatch />
          </Route>
        </Switch>
      </HashRouter>
    </AppWrapper>
  );
}
